<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用js创建虚拟DOM</title>
  </head>

  <body>
    <div id="test"></div>
    <div id="demo"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>

    <script type="text/javascript">
      const VDOM = React.createElement("h1", { id: "tiele" }, "Hello,React");
      const TDOM = document.getElementById("demo");

      ReactDOM.render(VDOM, document.getElementById("test"));

      console.log("虚拟DOM", VDOM);
      console.log("真实DOM", TDOM);
      debugger;
      // console.log(typeof VDOM);
      // console.log(VDOM instanceof Object);

      /*
        关于虚拟DOM:
         1.本质是Object类型的对象（一般对象）
		 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
		 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
        */
    </script>
  </body>
</html>
